<!-- 积分商城-顶部推荐商品 -->
<template>
	<view>
		<u-row>
			<u-col span="11" offset="0.5">
				<view class="recommend-body">
					<u-row>
						<u-col span="6">
							<view>
								<u-col>
									<view>
										<u-swiper
											:list="list1"
											circular
											height="400rpx"
											indicator
											indicatorMode="dot"
											radius="10"
										></u-swiper>
									</view>
								</u-col>
							</view>
						</u-col>
						<u-col span="6">
							<view class="recommend-body-right">
								<u-row>
									<u-col span="11.5" offset="0.5">
										<view class="right-top">
											<u-col span="6">
												<view class="title">
													<u--text text="积分好礼" size="16" align="center" bold suffixIcon="play-right-fill" iconStyle="font-size: 12px" lineHeight="60rpx"></u--text>
													<u-tag size="mini" text="2000.0积分" shape="circle" bgColor="rgb(237,89,72)" borderColor="rgb(237,89,72)"></u-tag>
												</view>
											</u-col>
											<u-col span="6" offset="6">
												<view class="photo">
													<u--image :src="src" width="150rpx" height="150rpx" @click="click" radius="8"></u--image>
												</view>
											</u-col>
										</view>
									</u-col>
								</u-row>
								<u-row>
									<u-col span="11.5" offset="0.5">
										<view class="right-bottom">
											<u-col span="6">
												<view class="title">
													<u--text text="爆品推荐" size="16" align="center" bold suffixIcon="play-right-fill" iconStyle="font-size: 12px" lineHeight="60rpx"></u--text>
													<view >
														<u-tag size="mini" text="精品优选" shape="circle" bgColor="#FFB610" borderColor="#FFB610" color="black"></u-tag>
													</view>
													
												</view>
											</u-col>
											<u-col span="6" offset="6">
												<view class="photo">
													<u--image :src="src2" width="150rpx" height="150rpx" @click="click" radius="8"></u--image>
												</view>
											</u-col>										
										</view>
									</u-col>
								</u-row>
							</view>
						</u-col>
					</u-row>
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		name:"recommend",
		data() {
			return {
				list1: [
						'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					],
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				src2: 'https://cdn.uviewui.com/uview/album/4.jpg',
				i:1,
				timer:null,
			};
		},
		methods: {
			say(){
				this.src = 'https://cdn.uviewui.com/uview/album/'+ this.i +'.jpg'
				this.i++;
				if(this.i == 4){
					this.i = 1;
				}
			}
		},
		created() {
			
		},
		mounted(){
			this.timer = setInterval(this.say,2500)
		},
		//组件销毁前
		beforeDestroy(){
			clearInterval(this.timer);  
		}
		
	}
</script>

<style lang="scss">
	// 整体
	.recommend-body{
		position: relative;
		top: 25rpx;
		background: radial-gradient(#EEEEEF,#F3F4F4);
		height: 400rpx;
		border-radius: 25rpx;
		
		
		// 右侧推荐框体
		.recommend-body-right{
			height: 400rpx;
			
			// 上半部分
			.right-top{
				background: linear-gradient(to top, white, #FFF1F5);
				height: 197rpx;
				border-radius: 25rpx;

			}
			// 标题和积分提示
			.title{
				position: relative;
				top: 40rpx;
				

			}
			
			// 图片
			.photo{
				position: relative;
				margin: auto;
				bottom: 90rpx;
			}
			
			// 下半部分
			.right-bottom{
				background: linear-gradient(to top, white, #FFF1F5);
				height: 197rpx;
				position: relative;
				top: 6rpx;
				border-radius: 25rpx;
					
				
			}
			
		}
		
	}
</style>